interface TagProps {
  id: string
  isSelected: boolean
  children: React.ReactNode
  onClick: (id: string) => void
}

const Tag: React.FC<TagProps> = (props) => {
  const { id, isSelected, children, onClick } = props
  return (
    <div
      className={`text-[0.75rem] leading-[0.75rem] rounded-full p-2 lg:rounded-[2px] 2xl:text-[1.125rem] 2xl:leading-[1.125rem] 2xl:p-3 2xl:rounded-[3px] cursor-pointer ${
        isSelected ? 'text-white bg-[#91B01C]' : 'text-[#999999] bg-[#F4F4F4]'
      }`}
      onClick={() => onClick(id.toString())}
    >
      {children}
    </div>
  )
}

export default Tag
